<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 25px;
        }
        .left{
            width: 50%;
            height: 25px;
            background-color: rgb(47, 165, 185);
            float: left;
        }
        .right{
            width: 50%;
            height: 25px;
            background-color: rgb(219, 139, 19);
            float:right;
        }
    </style>
</head>
<body>
<p>投票结果</p>
<div class="box">
    <div class="left">
        <b class="b1">50</b>%
    </div>
    <div class="right">
        <b class="b2">50</b>%
    </div>
</div>
<p>投赞成数票 <span class="span1">0</span></p>
<p>投反对数票 <span class="span2">0</span></p>
<button class="btn1">赞成</button>
<button class="btn2">反对</button>
</body>
<html>
<script>
var left= document.querySelector('.left')
var right= document.querySelector('.right')
var b1= document.querySelector('.b1')
var b2= document.querySelector('.b2')
var span1= document.querySelector('.span1')
var span2= document.querySelector('.span2')
var btn1= document.querySelector('.btn1')
var btn2= document.querySelector('.btn2')

var n1=0
var n2= 0
var sum //用于接收点赞和反对的和
btn1.onclick=function(){
    n1++//每点击一次数量加1
    sum =n1+n2
    span1.innerHTML=n1 //在页面上渲染赞成的数量 
    right.style.width=(n2/sum)*800+'px' //赞成的宽度
    left.style.width=(n1/sum)*800+'px'//反对的宽度
    b1.innerText=  parseFloat(n1/sum*100).toFixed(2)//将赞成的宽度占比在页面上显示
    b2.innerText=  parseFloat((n2/sum)*100).toFixed(2)//将反对的宽度占比在页面上显示
}
   
btn2.onclick=function(){
    n2++
    sum =n1+n2
    span2.innerHTML=n2
    right.style.width=(n2/sum)*800+'px'
    left.style.width=(n1/sum)*800+'px'
    console.log((n2/sum)*800)
    b1.innerText=  parseFloat(n1/sum*100).toFixed(2)
    b2.innerText=  parseFloat((n2/sum)*100).toFixed(2)
  
}  

</script>